import React from 'react';
import { connect } from 'dva';
import BasePage from './BasePage'
import { Row, Col, Button, Modal, List, Card, Table, Popover } from 'antd'
import { Router, Route, Switch, routerRedux, Input, Space, Descriptions } from 'dva/router';
import mechanismStyle from '../assets/less/mechanismLess.less'
import CurrentLocation from '../components/currentLocation'
import breadArr from '../constant/breadArr'
import constant from '../constant/constant'
class MechanismPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isModaVisible: false,
      showDataSource: [],
      modalTitle: ""
    }
  }

  componentWillMount() {
    this.props.dispatch({
      type: 'mechanismPage/getVerificationmechanismList'
    })
    this.props.dispatch({
      type: 'mechanismPage/getTestmechanismList'
    })
  }

  allMechanismList(mechanism) {
    if (mechanism == "test") {//测试机构
      this.setState({
        showDataSource: this.props.mechanismPage.mechanismTList,
        isModaVisible: true,
        modalTitle: "测试机构"
      })
    }
    else {//验证机构
      this.setState({
        showDataSource: this.props.mechanismPage.mechanismVList,
        isModaVisible: true,
        modalTitle: "验证机构"
      })
    }

    this.setState({
      isModaVisible: true
    });
  }

  handleCancel = () => {
    this.setState({
      isModaVisible: false
    })
  }

  render() {
    const columns = [
      {
        title: "机构名称",
        dataIndex: "mechanismName",
        key: "mechanismName"
      },
      {
        title: "email",
        dataIndex: "email",
        key: "email"
      },
      {
        title: "地址",
        dataIndex: "address",
        key: "address"
      },
      {
        title: "联系电话",
        dataIndex: "phone",
        key: "phone"
      },
      {
        title: "二维码",
        dataIndex: "appQRCode",
        key: "appQRCode",
        render: (text, record, index) => {
          let content = (
            <div>
              <img width={200} src={constant.serverUrl + constant.fileUrl.mechanismUrl + text}></img>
            </div>
          )
          return (<Popover content={content} trigger="click">
            <a>{text}</a>
          </Popover>)
        }

      }
    ]

    return (
      <BasePage>
        <Row>
          <Col span={14}  >
            <CurrentLocation breadArr={breadArr.MechanismPage}></CurrentLocation>
          </Col>
          <Col span={10}  >

          </Col>
        </Row>
        <Row>
          <Col span={24}><div className={mechanismStyle.DivtextStyle}>机构</div></Col>

          <Col span={24}><div className={mechanismStyle.DivtextStyle}>-Organization structure-</div></Col>

          <Col span={24}><div className={mechanismStyle.DivtextStyle}><img id={mechanismStyle.mechanismFlow} src={require('../assets/imgs/machineflow.png')}></img></div></Col>

          <Col span={24}>  <div className={mechanismStyle.DivtextStyle2}>验证管理委员会：机构名称（官网链接）</div>  </Col>
          <Col span={24} > <div className={mechanismStyle.DivtextStyle2}>认证机构：机构名称（官网链接）</div></Col>
        </Row>
        <Row style={{ marginTop: 30 }}>
          <Col span={24}><div className={mechanismStyle.DivtextStyle}>验证机构</div></Col>

          <Col span={24}><div className={mechanismStyle.DivtextStyle}>-Verification Body-</div></Col>
          <Col span={24}><div className={mechanismStyle.DivtextStyle3} onClick={this.allMechanismList.bind(this, "verification")}>+More</div> </Col>
          <Col span={24}><div>
            <Table dataSource={this.props.mechanismPage.mechanismVList4} columns={columns} showHeader={false} pagination={false}>

            </Table>
          </div></Col>


        </Row>
        <Row style={{ marginTop: 30 }}>
          <Col span={24}><div className={mechanismStyle.DivtextStyle}>测试机构</div></Col>

          <Col span={24}><div className={mechanismStyle.DivtextStyle}>-Test Body-</div></Col>
          <Col span={24}><div className={mechanismStyle.DivtextStyle3} onClick={this.allMechanismList.bind(this, "test")}>+More</div></Col>

          <Col span={24}><div>
            <Table dataSource={this.props.mechanismPage.mechanismTList4} columns={columns} showHeader={false} pagination={false}>

            </Table>

          </div></Col>

        </Row>
        <Modal title={this.state.modalTitle} visible={this.state.isModaVisible} onCancel={this.handleCancel.bind(this)} width={1000} height={600} closable={false}
          footer={
            <Button type="primary" onClick={this.handleCancel.bind(this)}>
              关闭
        </Button>
          }>
          <Table dataSource={this.state.showDataSource} columns={columns} showHeader={true}
            pagination={{
              size: "small",
              pageSize: 5,
              total: this.state.showDataSource.length
            }}
          >

          </Table>
        </Modal>

      </BasePage>
    )
  }
}

const mapStateToProps = state => {
  return {
    mechanismPage: state.mechanismPage,
  }
}

export default connect(mapStateToProps)(MechanismPage)